<script setup lang="tsx">
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { HttpCodeEnum } from '@packages/share/enums'
import { getQuanityAPI, getSortAPI, getTabAPI } from '@/api/search/index'
import operateDrawer from '../components/grammar/index.vue'
import TipsSearchInput from '../components/TipsSearchInput.vue'
import AdvancedSearch from '../components/AdvancedSearch.vue'
import { ElMessage } from 'element-plus'
import { h } from 'vue'
import { reactive } from 'vue'

const operateRef = ref()
const AdvancedRef = ref()
const router = useRouter()
const search: any = ref('')
const active = ref('asset')
const searchList = reactive([
  { keyword: 'asset', name: '资产' },
  { keyword: 'loophole', name: '漏洞' },
  { keyword: 'social', name: '社工' },
  { keyword: 'DNS', name: 'DNS' },
  { keyword: 'IP', name: 'IP定位反查' }
])
const dataList: any = ref([
  {
    name: '资产数量',
    num: '25.55亿'
  },
  {
    name: '域名WHOIS数量',
    num: '8.23亿'
  },
  {
    name: 'WHOIS数量',
    num: '1095.33万'
  },
  {
    name: '漏洞数量',
    num: '233196'
  },
  {
    name: 'PDNS',
    num: '1194.33亿'
  },
  {
    name: 'FDNS',
    num: '1143.54亿'
  },
  {
    name: '组织机构',
    num: '798.34万'
  },
  {
    name: '社工',
    num: '50.29亿'
  }
])
const rankList: any = ref([])
const fieldsList: any = ref([])

//tab切换
const handleTitle = (type: string) => {
  active.value = type
  if (type === 'DNS' || type === 'IP'||type==='social') {
    ElMessage({
      message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
        h('span', null, '此功能尚未开放，敬请期待！')
      ])
    })
    return
  } else if (active.value !== type) {
    search.value.keyword = ''
    gettab(type)
  }
}
//搜索
const searchKey = () => {
  switch (active.value) {
    case 'asset':
      router.push({
        name: 'SearchAsset',
        query: {
          keyword: search.value.keyword,
          active: active.value
        }
      })
      break
    case 'loophole':
      router.push({
        name: 'SearchLoopHole',
        query: {
          keyword: search.value.keyword,
          active: active.value
        }
      })
      break
    case 'social':
      // router.push({
      //   name: 'SearchInstitution',
      //   query: {
      //     keyword: search.value.keyword,
      //     active: active.value
      //   }
      // })
      break
    case 'DNS':
      break
    case 'IP':
      break

    default:
      break
  }
}
//高级搜索
const sure = (val: string) => {
  switch (active.value) {
    case 'asset':
      router.push({
        name: 'SearchAsset',
        query: {
          keyword: val
        }
      })
      break
    case 'loophole':
      router.push({
        name: 'SearchLoopHole',
        query: {
          keyword: val
        }
      })
      break
    case 'social':
      // router.push({
      //   name: 'SearchInstitution',
      //   query: {
      //     keyword: val
      //   }
      // })
      break
    case 'DNS':
      break
    case 'IP':
      break
    default:
      break
  }
}
// 底部排名搜索
const concatValue = (type: string, name: string) => {
  // 搜索栏为空
  if (!search.value.keyword) {
    search.value.keyword = `${type} : "${name}"`
  } else {
    // 词条存在
    if (search.value.keyword.includes(type)) {
      const regex = new RegExp(`(\\s*&&\\s*)?(${type})\\s*(:|!=)\\s*("[^"]*"|\\*)`, 'g')
      search.value.keyword = search.value.keyword.replace(
        regex,
        (Str, group1, Name, group3, Value) => {
          const newValue = `"${name}"`
          return (group1 || '') + Name + ' ' + group3 + ' ' + newValue
        }
      )
    }
    // 词条不存在
    else {
      search.value.keyword += ` && ${type} : "${name}"`
    }
    // searchKey()
  }
}
//获取数量
const getQuanity = () => {
  getQuanityAPI().then((res) => {
    let { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      // dataList.value = rows
    }
  })
}
//获取排名
const getSort = () => {
  getSortAPI().then((res) => {
    let { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      rankList.value = rows
    }
  })
}
// 获取操作符
const gettab = (type: string) => {
  getTabAPI(type).then((res) => {
    let { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      fieldsList.value = rows
    }
  })
}
onMounted(() => {
  getQuanity()
  getSort()
  gettab(active.value)
})
</script>
<template>
  <div class="jm-bg-color jm-container">
    <!-- 标题 -->
    <div class="search-title">
      <div
        v-for="item in searchList"
        :key="item.keyword"
        @click="handleTitle(item.keyword)"
        :class="active === item.keyword ? 'active' : ''"
        class="fontText"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <TipsSearchInput
        v-if="fieldsList.length > 0"
        class="tips-search"
        ref="search"
        v-model:active="active"
        :FieldsList="fieldsList"
        @keyup.enter="searchKey"
      />
      <jm-button :icon="Search" @click="searchKey" class="ml-2" type="primary">搜索</jm-button>
    </div>
    <!-- 查询语法tab -->
    <div class="syntax">
      <jm-button type="primary" @click="operateRef.show()">查询语法</jm-button>
      <jm-button type="primary" @click="AdvancedRef.show()">高级搜索</jm-button>
    </div>
    <div class="advanced">
      <AdvancedSearch
        v-if="fieldsList.length > 0"
        ref="AdvancedRef"
        class="advanced-search"
        v-model:active="active"
        :FieldsList="fieldsList"
        @sure="sure"
      />
    </div>
    <!-- 数据统计 -->
    <div class="data-con">
      <div class="data-list">
        <div class="data-item" v-for="item in dataList" :key="item.name">
          <div style="color: var(--el-color-danger); font-size: 1.5rem; font-weight: 700">
            {{ item.name }}
          </div>
          <div class="title">{{ item.num }}</div>
        </div>
      </div>
    </div>
    <!-- 排名 -->
    <div class="rank-con">
      <div class="rank-box" v-for="item in rankList" :key="item.title">
        <div class="title">{{ item.title }}</div>
        <jm-timeline class="timeline">
          <jm-timeline-item
            v-for="(item2, index) in item.list"
            :key="index"
            :timestamp="item2.name"
            hide-timestamp
            style="background-color: #fff"
          >
            <div class="timeline-con" @click="concatValue(item.type, item2.name)">
              <span>{{ item2.name }}</span>
              <span>{{ item2.num }}</span>
            </div>
          </jm-timeline-item>
        </jm-timeline>
      </div>
    </div>
    <operateDrawer ref="operateRef" />
  </div>
</template>
<style lang="scss" scoped>
%flex-center {
  display: flex;
  justify-content: center;
}

%flex-between {
  display: flex;
  justify-content: space-between;
}

.search-title,
.search,
.syntax,
.data-con {
  @extend %flex-center;
}

.search-title {
  font-weight: 700;
  font-size: 1.875rem;
  margin-top: 6.25rem;

  div {
    margin: 0 2.5rem;
    cursor: pointer;
  }

  .active {
    background: #fff;
    border-color: #007bff;
    border-bottom: 1px solid transparent;
    color: #007bff;
  }
}

.search {
  margin-top: 3.125rem;

  :deep(.el-input) {
    width: 43.75rem;
  }

  .tips-search {
    background: rgb(255 255 255 / 15%);
    border: 1px solid #ffffff;
  }
}

.syntax {
  margin-top: 1.25rem;
}

.data-con {
  margin-top: 3.125rem;

  .data-list {
    @extend %flex-between;
    .title {
      margin-top: 0.625rem;
      text-align: center;
    }
    .data-item {
      margin: 0 1rem;
    }
  }
}

.rank-con {
  @extend %flex-between;
  width: 70.5rem;
  margin: 4.25rem auto 0;

  .rank-box {
    width: 22%;

    .title {
      position: relative;
      padding-left: 1.75rem;
      margin-bottom: 1.25rem;
      font-weight: 700;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--el-color-primary);
      }
    }

    .timeline {
      cursor: pointer;

      :hover {
        color: red;
      }

      .timeline-con {
        @extend %flex-between;

        span {
          line-height: 1.25rem;
        }
      }
    }
  }
}

.advanced {
  width: 50rem;
  margin: 0 auto;
}

:deep(.advanced-search) {
  .list {
    .item {
      input {
        background: rgb(255 255 255 / 15%);
      }
    }
  }

  .operator {
    i {
      color: #ccc;
    }
  }
}
.fontText {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
